Design Token
Jina Aneeが提唱
Design Systemにおいて最小単位のstyleを定義するもの
予めプロジェクト内で使うDesignの要素を定義しておく
無尽蔵な中から色を選択するのではなく、予め用意された色を選択することで統一感を保てる
順序は知らないが、Tailwindでstylingする際に、smallとかでmarginの幅が決定することに近い
Figmaのようなデザインファイルと、実装のズレをなくすために使える
参考
デザイントークンとは?デザインシステムに関わる人が知っておきたいメリットや使い方まで - bagelee(ベーグリー)
わかりやすい
#WIP
Global token
割と数を列挙したもの
例
https://gyazo.com/3d31604c29daffd3951a7acdd1ea3e3f
Alias token
Global tokenの中から特によく使うものに別名を付けたもの
例えば、--red-700にerrorという名前をつけるなど
Design Tokenの対象の例
https://gyazo.com/24b7c20172f732247ebcf86cc5fed9e1
これはFigma Tokensで指定できるもののの一部
ここまでできるんだったら、
FigmaとStorybooksと、React Componentとtailwindを紐付けて
このCOmponentはFigmaのここに対応してます、とかできそう
そもそもTailwindを使うなら、Figma上のデザインをTailwindに合わせてもいいな
もちろん逆でもいい。というか普通は逆だろう
Figmaのルールに従って、Tailwindのルールを生成する
具体例
https://www.lightningdesignsystem.com/design-tokens/
https://spectrum.adobe.com/page/design-tokens/
https://hack.nikkei.com/blog/advent20201222/
https://blog.adobe.com/jp/publish/2021/03/29/cc-web-what-are-design-tokens
Design Tokenの考え方
https://www.designtokens.dev/
デザイントークンは色、余白、行間、Elevation(高さ)、フォント、フォントサイズ、シャドウ、アニメーション時間など複数のコンポーネントやテキスト要素にまたいで使われる情報を保存します。 ref
https://note.com/amishiratori/n/n261a796d87a6
https://zeroheight.com/blog/connecting-design-and-development-react-github-and-tokens/
zeroheight
具体例
プロダクトの背景色
Design Tokenを管理する
Figma Tokens
Diez
Style Dictionary
Theo
https://github.com/salesforce-ux/theo
https://www.youtube.com/watch?v=1HREvonfqhY
Design Tokenの利用例
これはStyle Dictionaryを使っている
一箇所を変えれば、デザインファイルも、実装も変わっていることがわかる
https://www.youtube.com/live/Jn6nFEWDg50?si=QCxInJ0Oa9AEOK2v&t=1470